<template>
  <div style="display: flex; flex-direction: row;">
    <div v-for="(item, index) in moduleList" class="item" :key="'com_' + index" @click="changeScene(index)">{{ item.name }}</div>
  </div>
  <component :is="ComRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
const modules: any = import.meta.glob("./components/!(._*).vue", { eager: true });//排除mac自动生成的元文件
const moduleList: any[] = []
for (const path in modules) {
  moduleList.push({
    name: modules[path].default.name,
    module: modules[path].default
  })
}

const ComRef = ref(moduleList[moduleList.length - 1].module);

const changeScene = (index: number) => {
  ComRef.value = moduleList[index].module
}
</script>
<style scoped>
  .item {
    padding: 10px;
  }
</style>
